<style lang="less">
.cap {
  display: flex;
  align-items: center;
  font-size: 12px;
  height: 28px;

  &-icon {
    position: relative;
    z-index: 1;
  }

  &-name {
    display: block;
    margin-left: -10px;
    padding: 0 12px 0 13px;
    background-color: #F0F4F5;
    border-radius: 10px;
    line-height: 20px;
  }

  &__golden {
    background-color: #FEFADB;
  }

  .icon-cap {
    width: 28px;
    height: 27px;
  }
}
</style>

<template>
  <div
    class="cap"
    @click="handleClick"
  >
    <v-icon
      image
      :type="type"
      class="cap-icon"
    />

    <span
      class="cap-name"
      :class="{ [`cap__${theme}`]: theme }"
    >{{ name }}</span>
  </div>
</template>

<script>
import Icon from '~/components/icon'

export default {
  components: {
    'v-icon': Icon,
  },

  props: {
    type: {
      type: String,
      default: 'cap', // cap, honor
    },
    name: {
      type: String,
      default: '普通用户',
    },
    theme: {
      type: String,
      default: '',
    },
  },

  methods: {
    handleClick (ev) {
      this.$emit('click', ev)
    },
  },
}
</script>
